Web sites are typically comprised of a combination of visible content and associated code. Web design typically involves a graphics artist designing the graphics and general layout of the Web pages followed by the Web designer slicing up these graphics into different areas and then assigning functionality or logic, such as behaviors, links, rollovers, code, script, or the like, to the different graphic elements corresponding to each sliced area. These sliced graphic elements are then assembled into individual cells of a Hypertext Markup Language (HTML) table to be displayed as the Web page on a Web browser.
FIG. 1 is an illustration of Web page 11 displayed on Web browser 10 at Uniform Resource Locator (URL) 100. Web page 11 includes graphics areas 101 and 107, and other functional areas such as logon form 106 and interactive buttons 102-105. A problem arises when an edit or change to the Web page becomes desirable. The designers tasked with updating the Web page must typically retrieve the Web page and bring it into an image editing application, such as MACROMEDIA's FIREWORKS™, MACROMEDIA's FREEHAND™, ADOBE's PHOTOSHOP™, and the like. However, once the Web functionality or logic has been applied to the graphics of the Web page, those graphics and images have been sliced into many individual image files, with some images hidden or viewable only on certain events (i.e., rollovers, frame swaps, and the like). Any graphical changes may need to be applied to many of the sliced graphics and any updates to the code, logic, or functionality may also need to be associated with the sliced elements that make up the Web page.
A Web designer tasked with modifying graphics incorporated into an existing Web page may usually obtain access to the original Web page content by downloading it via File Transport Protocol (FTP) or the like. After loading the Web page content into an editing application, the Web designer manually attempts to find and recombine all of the graphics or images for this particular page. A common method to assist this process includes opening the source code, such as the actual HTML file, in a plain text editor to use the image references in the source code to determine the file names of all the images. Once each of the graphics or images have been opened in the image editor, the designer manually positions the pieces attempting to reassemble the Web page like a jigsaw puzzle. The designer then attempts to figure out the functionality of the different graphics or images and determines which ones are hidden or used in rollovers or the like. Any changes are then made to the re-assembled and hidden content.
FIG. 2 is an illustration showing assembly of visible content 20 with the many graphics and images that comprise Web page 11 (FIG. 1). As is shown, there are many graphics and images, some of which cannot even be seen in the complete Web page 11 of FIG. 1, because they only show up with a button rollover or other such event. For example, home button 102 (FIG. 1) comprises three graphical images, buttons 202-204. Button 202 represents the initial button state, button 203 represents the rollover state of home button 102 (FIG. 1), and button 204 represents the depressed button state. Similarly, buttons 103-105 (FIG. 1) have three different state buttons in buttons 205-213. Each of pieces 200-217 are retrieved from the cells of an HTML table making up Web page 11 (FIG. 1). The designer would open each image or slice region of Web page 11 (FIG. 1) onto a graphical editing application, re-assemble the slice regions into a cohesive graphic, modify the graphic, and then re-slice and save the pieces into the modified Web page. In order for the modified Web page to correctly display when uploaded to the Web server, each image and graphic needs to be reassembled exactly bit for bit.
The modification process includes collecting the individual graphic slice regions from the Web page, assembling those bits and pieces for modification in the image editing application, modifying the re-assembled and associated graphics, and then re-slicing and saving the pieces for use in the modified Web page. This painstakingly detailed process generally takes a long time which translates to extensive costs for Web page modification. Frequently, because of the complexity and detail of the modification process, designers may redesign Web pages from scratch to avoid this long and expensive process.